<script src="$"jquery.min.js":cached()$"></script>
<script src="$"jquery.Jcrop.min.js":cached()$"></script>
<link rel="stylesheet" href="$"jquery.Jcrop.css":cached()$" type="text/css" />

<h3>Crop the photo if necessary:</h3>

<form action="facebookCropPhoto" method="post">
<img src="$photo_url$" id="cropbox">
<input type="hidden" name="selectedPhoto" value="$photo_id$">
<input type="hidden" name="crop" id="crop">
<input type="hidden" name="x1" id="x1">
<input type="hidden" name="y1" id="y1">
<input type="hidden" name="x2" id="x2">
<input type="hidden" name="y2" id="y2">

<input type="submit" name="submit" value="Save">
</form>

<script language="Javascript">

  function showCoords(c)
  {
    // c.x, c.y, c.x2, c.y2, c.w, c.h
    \$('#crop').val('true');
    \$('#x1').val(c.x);
    \$('#y1').val(c.y);
    \$('#x2').val(c.x2);
    \$('#y2').val(c.y2);
  };

  jQuery(function() {
    jQuery('#cropbox').Jcrop({
      onSelect: showCoords,
      onChange: showCoords
    });
  });
</script>